<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录您的账户 - {:conf('site_name')}</title>
    <meta name="keywords" content="登录,账户,{:conf('site_name')}">
    <meta name="description" content="登录您的账户 - {:conf('site_name')}">
    <meta name="author" content="www.qqss.net">
    <!-- Favicon -->
    <link rel="icon" href="{:conf('site_favicon')}" type="image/x-icon">
    <!-- CSS -->
    <link href="/static/default/css/tailwind/tailwind.min.css?v={$static_version}" rel="stylesheet">
    <link href="/static/css/fontawesome/css/all.min.css?v={$static_version}" rel="stylesheet">
    <link href="/static/default/css/main.css?v={$static_version}" rel="stylesheet">
    <link href="/static/default/css/mobile-optimization.css?v={$static_version}" rel="stylesheet">
    <link href="/static/default/css/user/auth.css?v={$static_version}" rel="stylesheet">

    <!-- 插件头部hook -->
    {cms:hooks name="template.head" /}
</head>

<body class="bg-gray-50">
    <!-- 插件头部hook -->
    {cms:hooks name="common.header.before" /}

    <div class="auth-container flex min-h-screen">
        <!-- 左侧图片区域 -->
        <div class="auth-left w-1/2 hidden lg:flex flex-col justify-center items-center text-white p-12 relative">
            <!-- 浮动图标 -->
            <i class="floating-icon fas fa-lock text-4xl opacity-20"></i>
            <i class="floating-icon fas fa-shield-alt text-3xl opacity-15"></i>
            <i class="floating-icon fas fa-key text-5xl opacity-10"></i>
            <i class="floating-icon fas fa-user-check text-3xl opacity-25"></i>

            <div class="text-center z-10 relative max-w-md mx-auto">
                <!-- 主标题 -->
                <div class="mb-8">
                    <h1
                        class="text-5xl xl:text-6xl font-bold mb-4 bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent">
                        欢迎回来
                    </h1>
                    <div class="w-16 h-1 bg-white bg-opacity-60 mx-auto rounded-full"></div>
                </div>

                <!-- 描述文案 -->
                <p class="text-xl xl:text-2xl mb-12 opacity-90 leading-relaxed font-light">
                    继续您的精彩旅程<br>
                    <span class="text-lg opacity-75">安全登录，畅享专属体验</span>
                </p>

                <!-- 特色功能 -->
                <div class="grid grid-cols-1 gap-6 mb-8">
                    <div class="flex items-center justify-center space-x-3 py-3 px-6 backdrop-blur-sm">
                        <i class="fas fa-fingerprint text-2xl text-green-200"></i>
                        <span class="text-lg font-medium">安全认证</span>
                    </div>
                    <div class="flex items-center justify-center space-x-3 py-3 px-6 backdrop-blur-sm">
                        <i class="fas fa-bolt text-2xl text-yellow-200"></i>
                        <span class="text-lg font-medium">快速登录</span>
                    </div>
                    <div class="flex items-center justify-center space-x-3 py-3 px-6 backdrop-blur-sm">
                        <i class="fas fa-sync-alt text-2xl text-blue-200"></i>
                        <span class="text-lg font-medium">多端同步</span>
                    </div>
                </div>

                <!-- 底部提示 -->
                <div class="text-sm opacity-60">
                    <p>您的数据安全由 <span class="font-semibold text-green-200">SSL加密</span> 技术保护</p>
                </div>
            </div>
        </div>

        <!-- 右侧表单区域 -->
        <div class="auth-right w-full lg:w-1/2 flex items-center justify-center p-6 lg:p-12">
            <div class="w-full max-w-md space-y-8">
                <!-- 头部 -->
                <div class="text-center">
                    <!-- <div class="mb-6">
                        <img class="mx-auto h-12 w-auto" src="{:conf('site_logo')}" alt="{:conf('site_name')}">
                    </div> -->
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-2">
                        登录您的账户
                    </h2>
                    <p class="text-sm text-gray-500">
                        还没有账户？
                        <a href="{:_url_('user.register')}"
                            class="font-medium text-blue-600 hover:text-blue-500 transition-colors">
                            立即注册
                        </a>
                    </p>
                </div>

                <!-- 登录表单 -->
                <form id="login-form" class="space-y-6" onsubmit="return false;">
                    <!-- 跳转地址 -->
                    <input type="hidden" name="redirect" value="{$redirect}">

                    <div class="space-y-4">
                        <!-- 用户名或邮箱 -->
                        <div>
                            <label for="username" class="block text-sm font-medium text-gray-700 mb-2">
                                账户
                            </label>
                            <input id="username" name="username" type="text" required
                                class="form-input appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                placeholder="请输入用户名或邮箱">
                        </div>

                        <!-- 密码 -->
                        <div>
                            <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
                                密码
                            </label>
                            <div class="relative">
                                <input id="password" name="password" type="password" required
                                    class="form-input appearance-none relative block w-full px-4 py-3 pr-12 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="请输入密码">
                                <button type="button" onclick="togglePassword()"
                                    class="absolute inset-y-0 right-0 pr-4 flex items-center">
                                    <i id="password-icon"
                                        class="fas fa-eye text-gray-400 hover:text-blue-600 transition-colors"></i>
                                </button>
                            </div>
                        </div>

                        <!-- 验证码 -->
                        <div>
                            <label for="captcha" class="block text-sm font-medium text-gray-700 mb-2">
                                验证码
                            </label>
                            <div class="flex gap-3">
                                <input id="captcha" name="captcha" type="text" required
                                    class="form-input appearance-none relative block flex-1 px-4 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="请输入验证码">
                                <div class="h-12 border border-gray-300 rounded cursor-pointer hover:opacity-80 transition-opacity bg-gray-100 flex items-center justify-center relative overflow-hidden"
                                    onclick="fetchCaptcha()" title="点击刷新验证码">
                                    <img id="captcha-image"
                                        src=""
                                        alt="验证码" class="h-full opacity-0 transition-opacity duration-300"
                                        onload="this.style.opacity='1'">
                                    <div id="captcha-placeholder"
                                        class="absolute inset-0 flex items-center justify-center text-xs text-gray-400">
                                        <i class="fas fa-image mr-1"></i>验证码
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 记住我和忘记密码 -->
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input id="remember" name="remember" type="checkbox" value="1"
                                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="remember" class="ml-2 block text-sm text-gray-600">
                                记住我
                            </label>
                        </div>

                        <div class="text-sm">
                            <a href="{:_url_('user.forgot')}"
                                class="font-medium text-blue-600 hover:text-blue-500 transition-colors">
                                忘记密码？
                            </a>
                        </div>
                    </div>

                    <!-- 登录按钮 -->
                    <div>
                        <button type="submit" onclick="doLogin()" id="login-btn"
                            class="btn-shine relative w-full flex items-center justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-300 overflow-hidden">
                            <span class="relative z-10 flex items-center">
                                <i class="fas fa-sign-in-alt mr-2"></i>
                                登录
                            </span>
                        </button>
                    </div>

                    <!-- 第三方登录 -->
                    <div class="mt-6">
                        <div class="relative">
                            <div class="absolute inset-0 flex items-center">
                                <div class="w-full border-t border-gray-300"></div>
                            </div>
                            <div class="relative flex justify-center text-sm">
                                <span class="px-2 bg-white text-gray-500">或者使用</span>
                            </div>
                        </div>

                        <!-- 第三方登录埋点 -->
                        {cms:hooks name="auth.login.third.party" /}
                    </div>
                </form>

                <!-- 底部链接 -->
                <div class="text-center">
                    <div class="text-sm text-gray-500">
                        登录即表示您同意我们的
                        <a href="{:_url_('agreement.index', ['id' => 1])}"
                            class="text-blue-600 hover:text-blue-500 transition-colors">用户协议</a>
                        和
                        <a href="{:_url_('agreement.index', ['id' => 2])}"
                            class="text-blue-600 hover:text-blue-500 transition-colors">隐私政策</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入脚本组件 -->
    {include file="default/components/scripts" /}

    <script>
        // 验证码数据
        let captchaKey = '';

        // 获取验证码
        function fetchCaptcha() {
            $.ajax({
                url: '/web/user/getCaptcha',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    if (response.code === 1) {
                        captchaKey = response.data.key;
                        const captchaImg = document.getElementById('captcha-image');
                        const placeholder = document.getElementById('captcha-placeholder');
                        captchaImg.src = response.data.base64;
                        // 图片加载完成后隐藏占位符
                        captchaImg.onload = function () {
                            this.style.opacity = '1';
                            if (placeholder) placeholder.style.display = 'none';
                        };
                    } else {
                        console.error('获取验证码失败:', response.msg);
                        showError('获取验证码失败');
                    }
                },
                error: function (xhr, status, error) {
                    console.error('获取验证码失败:', error);
                    showError('获取验证码失败');
                }
            });
        }

        // 切换密码显示/隐藏
        function togglePassword() {
            const passwordInput = document.getElementById('password');
            const passwordIcon = document.getElementById('password-icon');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                passwordIcon.className = 'fas fa-eye-slash text-gray-400 hover:text-blue-600 transition-colors';
            } else {
                passwordInput.type = 'password';
                passwordIcon.className = 'fas fa-eye text-gray-400 hover:text-blue-600 transition-colors';
            }
        }

        // 执行登录
        function doLogin() {
            const form = document.getElementById('login-form');
            const formData = new FormData(form);
            const btn = document.getElementById('login-btn');

            // 基本验证
            const username = formData.get('username');
            const password = formData.get('password');
            const captcha = formData.get('captcha');

            if (!username || !password) {
                showError('请填写用户名和密码');
                return;
            }

            if (!captcha) {
                showError('请输入验证码');
                return;
            }

            if (!captchaKey) {
                showError('验证码已过期，请刷新');
                fetchCaptcha();
                return;
            }

            // 触发点击动画
            btn.classList.add('btn-clicked');
            setTimeout(() => btn.classList.remove('btn-clicked'), 800);

            // 显示加载状态
            btn.disabled = true;
            const originalContent = btn.querySelector('span').innerHTML;
            btn.querySelector('span').innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>登录中...';

            // 发送登录请求
            $.ajax({
                url: '/user/doLogin',
                type: 'POST',
                data: {
                    username: username,
                    password: password,
                    captcha: captcha,
                    captcha_key: captchaKey,
                    remember: formData.get('remember') ? 1 : 0,
                    redirect: formData.get('redirect') || '/user'
                },
                dataType: 'json',
                success: function (response) {
                    if (response.code === 1) {
                        // 登录成功
                        showSuccess('登录成功！');
                        setTimeout(() => {
                            window.location.href = response.data.redirect || '/user';
                        }, 1000);
                    } else {
                        showError(response.msg || '登录失败');

                        // 如果是验证码错误，刷新验证码
                        if (response.msg && response.msg.includes('验证码')) {
                            fetchCaptcha();
                            document.getElementById('captcha').value = '';
                            document.getElementById('captcha').focus();
                        }
                    }
                },
                error: function (xhr, status, error) {
                    console.error('Login error:', error);
                    showError('网络错误，请稍后重试');
                    // 网络错误时也刷新验证码
                    fetchCaptcha();
                },
                complete: function () {
                    btn.disabled = false;
                    btn.querySelector('span').innerHTML = '<i class="fas fa-sign-in-alt mr-2"></i>登录';
                }
            });
        }

        // 第三方登录
        function thirdPartyLogin(type) {
            showInfo('第三方登录功能开发中...');
            // TODO: 实现第三方登录
        }

        // 获取URL参数
        function getUrlParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function () {
            // 获取验证码
            fetchCaptcha();

            // 聚焦用户名输入框
            document.getElementById('username').focus();

            // 回车登录
            document.getElementById('login-form').addEventListener('keypress', function (e) {
                if (e.key === 'Enter') {
                    doLogin();
                }
            });

            // 如果有错误参数，显示错误信息
            const error = getUrlParam('error');
            if (error) {
                showError(decodeURIComponent(error));
            }
        });
    </script>

    <!-- 插件底部hook -->
    {cms:hooks name="common.footer" /}
</body>

</html>